<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header">
        <div class="header-1">
            <span>新人必看</span>
            <span>限时免费</span>
            <span class="header-1-1">热血</span>
            <span>完结</span>
            <span>双男主</span>
        </div>
        <div class="header-2">
            <div class="header-2-1">
                <img src="./img/shousuo.png" alt="">
                <input type="text">
            </div>
            <div class="header-2-2">
                <img src="./img/fenlei.png" alt="">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="picture">
            <div class="picture-1">
                
            </div>
           <div class="picture-2">
               <span>镇魂街</span>
               <div class="round">
                   <div class="⚪"></div>
                   <div class=""></div>
                   <div class=""></div>
               </div>
           </div>

        </div>
        <!-- 人气TOP -->
        <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>人气作品</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/xianwu.jpg" alt="">
                        <h3 class="p-1">仙武</h3>
                        <h4 class="p-2">望尽九国壮美山河</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/renqi-1.jpg" alt="">
                        <h3 class="p-1">我的妹妹有毒</h3>
                        <h4 class="p-2">妹妹要毁灭世界</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/changan.jpg" alt="">
                        <h3 class="p-1">长安幻想</h3>
                        <h4 class="p-2">长安幻想丛生</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/woben.jpg" alt="">
                        <h3 class="p-1">我本废材</h3>
                        <h4 class="p-2">既来之则安之</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/wudao.jpg" alt="">
                        <h3 class="p-1">武道至尊</h3>
                        <h4 class="p-2">漫天神魔中唯我独尊</h4>
        
                    </div>
                    <div class="works">
                        <a href="./detail.html"><img src="./img/suolong.jpg" alt=""></a>
                        <h3 class="p-1">锁龙</h3>
                        <h4 class="p-2">签订契约吗大兄弟</h4>
        
                    </div>
                </div>
            </div>
        </div>
        <!-- 叮~新作来啦 -->
        <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                    <p>叮~新作来啦</p>
               </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/shenlan.jpg" alt="">
                        <h3 class="p-1">深蓝之境</h3>
                        <h4 class="p-2">穿越异世界骑白马</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/shang.jpg" alt="">
                        <h3 class="p-1">上旋高手</h3>
                        <h4 class="p-2">打网球不让女孩的人</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/xiangshen.jpg" alt="">
                        <h3 class="p-1">降神之伞</h3>
                        <h4 class="p-2">白发魔伞</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/tun.jpg" alt="">
                        <h3 class="p-1">超级吞噬系统</h3>
                        <h4 class="p-2">我带着系统升级</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/tian.jpg" alt="">
                        <h3 class="p-1">天清</h3>
                        <h4 class="p-2">开天辟地不死不灭</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/feng.jpg" alt="">
                        <h3 class="p-1">风一样的勇士</h3>
                        <h4 class="p-2">风一样的勇士</h4>
        
                    </div>
                </div>
            </div>
        </div>
        <!-- 玄幻世界 -->
        <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>玄幻世界</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/di.jpg" alt="">
                        <h3 class="p-1">地狱不孤单</h3>
                        <h4 class="p-2">小恶魔在地狱的故事</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/mo.jpg" alt="">
                        <h3 class="p-1">魔王条约</h3>
                        <h4 class="p-2">史上最弱魔王诞生！</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/hu.jpg" alt="">
                        <h3 class="p-1">御狐俏祭师</h3>
                        <h4 class="p-2">公主的冒险旅程</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/xuan.jpg" alt="">
                        <h3 class="p-1">百玄传</h3>
                        <h4 class="p-2">全彩少年道士冒险故事</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/shou.jpg" alt="">
                        <h3 class="p-1">守护者传说</h3>
                        <h4 class="p-2">魔幻世界冒险故事</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/yiwan.jpg" alt="">
                        <h3 class="p-1">一万零七夜-彩漫周更-</h3>
                        <h4 class="p-2">狼兄虎妹腹黑羊</h4>
        
                    </div>
                </div>
            </div>
        </div>
        <!-- 科幻冒险 -->
        <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>科幻冒险</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/yan.jpg" alt="">
                        <h3 class="p-1">炎黄演义</h3>
                        <h4 class="p-2">末日的拯救任务</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/long.jpg" alt="">
                        <h3 class="p-1">龙墓</h3>
                        <h4 class="p-2">未来少年的危机任务</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/xian.jpg" alt="">
                        <h3 class="p-1">限定24小时</h3>
                        <h4 class="p-2">点物成人</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/chi.jpg" alt="">
                        <h3 class="p-1">赤心者</h3>
                        <h4 class="p-2">屌丝的英雄进化之路</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/quan.jpg" alt="">
                        <h3 class="p-1">全职大师年代记</h3>
                        <h4 class="p-2">大小姐的战斗之路</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/cang.jpg" alt="">
                        <h3 class="p-1">藏锋行</h3>
                        <h4 class="p-2">妖刀重现江湖</h4>
        
                    </div>
                </div>
            </div>
        </div>
         <!-- 专业修仙 -->
         <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>专业修仙</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/xion.jpg" alt="">
                        <h3 class="p-1">熊猫侠齐天</h3>
                        <h4 class="p-2">变异怪咖的相爱相杀</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/zhutian.jpg" alt="">
                        <h3 class="p-1">诸天至尊</h3>
                        <h4 class="p-2">至尊的成长史</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/bumie.jpg" alt="">
                        <h3 class="p-1">不灭元神</h3>
                        <h4 class="p-2">获至宝，寻天道</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/longhun.jpg" alt="">
                        <h3 class="p-1">龙魂特工</h3>
                        <h4 class="p-2">超级特工</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/woshi.jpg" alt="">
                        <h3 class="p-1">我是霸王</h3>
                        <h4 class="p-2">傲视苍穹天骄</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/shu.jpg" alt="">
                        <h3 class="p-1">书灵记</h3>
                        <h4 class="p-2">真正的书中自有系列</h4>
        
                    </div>
                </div>
            </div>
        </div>
         <!-- 青春热血 -->
         <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>青春热血</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/chun.jpg" alt="">
                        <h3 class="p-1">很纯很暧昧</h3>
                        <h4 class="p-2">少年获神眼镜成杀手</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/tiantang.jpg" alt="">
                        <h3 class="p-1">天堂计划</h3>
                        <h4 class="p-2">贫民窟的美男子</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/teshu.jpg" alt="">
                        <h3 class="p-1">特殊传说</h3>
                        <h4 class="p-2">根本不存在的学校</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/biye.jpg" alt="">
                        <h3 class="p-1">毕业游戏</h3>
                        <h4 class="p-2">夺命手机拨号中</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/dishao.jpg" alt="">
                        <h3 class="p-1">帝少别太猛</h3>
                        <h4 class="p-2">大少爷遇腹黑女</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/sudu.jpg" alt="">
                        <h3 class="p-1">速度线</h3>
                        <h4 class="p-2">飞车飘逸 心跳加速</h4>
        
                    </div>
                </div>
            </div>
        </div>
         <!-- 快乐最重要 -->
         <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>快乐最重要</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/luobo.jpg" alt="">
                        <h3 class="p-1">2B萝卜</h3>
                        <h4 class="p-2">萝卜城议会换届选举</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/sishen.jpg" alt="">
                        <h3 class="p-1">死神与小死神</h3>
                        <h4 class="p-2">死神和他的儿子</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/baozi.jpg" alt="">
                        <h3 class="p-1">功夫包子</h3>
                        <h4 class="p-2">中国元素的包子兄弟</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/guimao.jpg" alt="">
                        <h3 class="p-1">龟毛时事台</h3>
                        <h4 class="p-2">龟毛君的小记事</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/aiq.jpg" alt="">
                        <h3 class="p-1">爱情公寓漫画版</h3>
                        <h4 class="p-2">爱情公寓漫画版</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/baoxiao.jpg " alt="">
                        <h3 class="p-1">爆笑疯狂的水果</h3>
                        <h4 class="p-2">水果们的爆笑故事</h4>
        
                    </div>
                </div>
            </div>
        </div>
         <!-- 悬疑烧脑 -->
         <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>悬疑烧脑</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/linjie.jpg" alt="">
                        <h3 class="p-1">临界</h3>
                        <h4 class="p-2">兽人，濒临界点</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/lingjie.jpg" alt="">
                        <h3 class="p-1">零街戏话</h3>
                        <h4 class="p-2">关于女仆的少年漫画</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/miju.jpg" alt="">
                        <h3 class="p-1">迷局</h3>
                        <h4 class="p-2">看不透的人生道路</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/guitan.jpg" alt="">
                        <h3 class="p-1">鬼谈会</h3>
                        <h4 class="p-2">诡异的开始在鬼谈会开始</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/yinxion.jpg" alt="">
                        <h3 class="p-1">英雄</h3>
                        <h4 class="p-2">要做英雄？先当杀手</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/chaon.jpg" alt="">
                        <h3 class="p-1">超能领域</h3>
                        <h4 class="p-2">超越死亡的超能大组织</h4>
        
                    </div>
                </div>
            </div>
        </div>
         <!-- 长篇连载 -->
         <div class="popularity">
            <div class="popularity-1">
                <div class="popularity-1-1">
                     <p>长篇连载</p>
                </div>
                <div class="more">
                    <a href="#">•••</a>
                </div>
            </div>
            <div class="popularity2">
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/jueping.jpg" alt="">
                        <h3 class="p-1">绝品透视</h3>
                        <h4 class="p-2">神奇的透视功能</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/yaoji.jpg" alt="">
                        <h3 class="p-1">长安妖姬</h3>
                        <h4 class="p-2">沧海明月 大唐鬼宴</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/yulingshi.jpg" alt="">
                        <h3 class="p-1">驭灵师</h3>
                        <h4 class="p-2">作者穿越到自己的漫画</h4>
        
                    </div>
                </div>
                <div class="popularity-2-1">
                    <div class="works">
                        <img src="./img/hul.jpg" alt="">
                        <h3 class="p-1">互撸大漫画</h3>
                        <h4 class="p-2">挑战你的内涵尺寸</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/zhiming.jpg" alt="">
                        <h3 class="p-1">致命冲动</h3>
                        <h4 class="p-2">红包诱惑下的危机</h4>
        
                    </div>
                    <div class="works">
                        <img src="./img/ronguang.jpg" alt="">
                        <h3 class="p-1">荣光之翼</h3>
                        <h4 class="p-2">苍空世界的冒险之旅</h4>
        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blank">

    </div>
    <div class="bottom">
        <div class="bottom-1">
           <a href="#">
                <img src="./img/shequ.png" alt="">
            
            <p style="color: #000000;">社区</p>
        </a>
        </div>
        <div class="bottom-1">
            <a href="">
                <img src="./img/faxian-1.png" alt="">
           
            <p style="color: #51dea1;">发现</p>
        </a>
        </div>
        <div class="bottom-1">
            <a href="">
                <img src="./img/shujia.png" alt="">
            
            <p style="color: #000000;">书架</p>
        </a>
        </div>
        <div class="bottom-1">
            <a href="./my.html">
                <img src="./img/wode-1.png" alt="">
           
            <p style="color: #000000;">我的</p>
        </a>
        </div>
    </div>
</body>
</html>